<!-- 帖子列表 -->
<template>
  <div>
    <div class="container">
    <el-empty v-if="article.records.length == 0 && !this.docOp" description="'没有找到有关的内容'"></el-empty>
    <div class="post-module-3" v-loading="docOp">
      <div class="loop-list loop-list-style-1">
        <div v-for="(data,i) in article.records" :key="i">
          <article class="hover-up-2 transition-normal wow fadeInUp animated">
            <div class="row mb-40 list-style-2">
              <div class="col-md-4">
                <div class="post-thumb position-relative border-radius-5">
                  <a @click="$commons.toWindodBlog(data.id)" href="javascript:void(0)" style="white-space:nowrap;">
                    <div class="img-hover-slide border-radius-5 position-relative"
                      :style="{ backgroundImage: 'url(' + data.background + ')' }">
                      <!-- <span v-if="data.status != -1" :class="'top-left-icon'+' '+icons[data.status].c"><i
                  :class="'fa'+' '+ icons[data.status].i"></i></span> -->
                    </div>
                  </a>
                  <ul class="social-share">
                    <li><a href="#"><i class="elegant-icon social_share"></i></a></li>
                    <li><a class="fb" href="javascript:void(0)" title="暂时不可用" target="_blank"><svg
                          class="Zi Zi--WeChat Login-socialIcon" fill="#fff" viewBox="0 0 24 24" width="20" height="20">
                          <path
                            d="M2.224 21.667s4.24-1.825 4.788-2.056C15.029 23.141 22 17.714 22 11.898 22 6.984 17.523 3 12 3S2 6.984 2 11.898c0 1.86.64 3.585 1.737 5.013-.274.833-1.513 4.756-1.513 4.756zm5.943-9.707c.69 0 1.25-.569 1.25-1.271a1.26 1.26 0 0 0-1.25-1.271c-.69 0-1.25.569-1.25 1.27 0 .703.56 1.272 1.25 1.272zm7.583 0c.69 0 1.25-.569 1.25-1.271a1.26 1.26 0 0 0-1.25-1.271c-.69 0-1.25.569-1.25 1.27 0 .703.56 1.272 1.25 1.272z"
                            fill-rule="evenodd"></path>
                        </svg></a></li>
                    <li><a class="tw" href="javascript:void(0)" target="_blank" title="分享到QQ"><svg
                          class="Zi Zi--QQ Login-socialIcon" fill="#fff" viewBox="0 0 24 24" width="20" height="20">
                          <path
                            d="M12.003 2c-2.265 0-6.29 1.364-6.29 7.325v1.195S3.55 14.96 3.55 17.474c0 .665.17 1.025.281 1.025.114 0 .902-.484 1.748-2.072 0 0-.18 2.197 1.904 3.967 0 0-1.77.495-1.77 1.182 0 .686 4.078.43 6.29 0 2.239.425 6.287.687 6.287 0 0-.688-1.768-1.182-1.768-1.182 2.085-1.77 1.905-3.967 1.905-3.967.845 1.588 1.634 2.072 1.746 2.072.111 0 .283-.36.283-1.025 0-2.514-2.166-6.954-2.166-6.954V9.325C18.29 3.364 14.268 2 12.003 2z"
                            fill-rule="evenodd"></path>
                        </svg></a></li>
                    <li><a class="pt" href="javascript:void(0)" target="_blank" title="暂时不可用"><i
                          class="elegant-icon social_pinterest"></i></a></li>
                  </ul>
                </div>
              </div>
              <div class="col-md-8 align-self-center">
                <div class="post-content row">
                  <div class="col-12">
                    <div style="float:left;" class="entry-meta meta-0 font-small mb-10">
                      <a href="javascript:void(0)">
                        <span :class="'post-cat'+' '+ txtc[0]">{{tagName}}</span>
                      </a>
                    </div>
                  </div>

                  <div class="col-12">
                    <h5 style="float:left;" class="post-title font-weight-900 mb-20 ">
                      <span class="text-danger" v-if="data.status == 'TOP'">[顶置]</span>
                      <a @click="$commons.toWindodBlog(data.id)" href="javascript:void(0)" style="white-space:nowrap;">
                        {{$commons.overflowHidForText(data.title,25)}}
                      </a>
                      <!-- <span class="post-format-icon" v-if="data.star"><i class="elegant-icon icon_star_alt"></i></span> -->
                    </h5>
                  </div>
                  <div class="col-12">
                    <div style="float:left;" class="entry-meta meta-1 float-left font-x-small text-uppercase">
                      <p class="post-on">{{data.slogan}}</p>
                    </div>
                  </div>
                  <div class="col-12">
                    <div style="float:left;" class="entry-meta meta-1 float-left font-x-small text-uppercase">
                      <span class="post-on">{{$commons.dateStr(data.updatetime)}} 更新</span>
                      <span class="time-reading has-dot">{{$commons.formatNumber(data.views)}} 观看</span>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </article>
          <!-- <ky-article :data="item" :tag="tag" module="list"></ky-article> -->
        </div>
        <div class="pagination-area mb-30 mt-20 wow fadeInUp animated">
          <nav aria-label="Page navigation example">
            <el-pagination style="float:left;" layout="prev, pager, next" :total="article.total"
              :current-page="article.current" @current-change="pageChange" :page-size="article.size">
            </el-pagination>
          </nav>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';
  import KyArticle from '@/components/module/ky-article'
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      KyArticle
    },
    props: ['tag'],
    data() {
      //这里存放数据
      return {
        docOp: false,
        tagName: '',
        currentPage: 1,
        txtc: ['text-warning', 'text-danger', 'text-success', 'text-pink', 'text-primary', 'text-info',
          'text-secondary'
        ],
        icons: [{
          c: 'bg-info',
          i: 'fa-video-camera'
        }, {
          c: 'bg-danger',
          i: 'fa-photo'
        }, {
          c: 'bg-success',
          i: 'fa-music'
        }],
        article: {
          current: 1,
          size: 10,
          records: [],
          total: 0,
        }
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
      tag: function (n, o) {
        console.log(n);
        this.tagName = n;
        this.getArticle();
      }
    },
    //方法集合
    methods: {
      pageChange(page) {
        this.article.current = page;
        this.getArticle();
      },
      async getArticle() {
        this.docOp = true;
        const pram = {
          tag: this.tagName,
          current: this.article.current == undefined ? 1 : this.article.current,
          size: 10
        }
        var res = await this.$api.core.getBytag(pram);
        if (res.code == 20000) {
          if (res.data.length != 0) {
            this.article.records = res.data;
            this.article.total = Number(res.data[0].context);
          } else {
            this.article.records = [];
          }

        }
        this.docOp = false;
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }

</script>
<style>

</style>
